<template>
  <header
    class="sticky top-0 w-full z-10 bg-white"
    style="
      height: 60px;
      line-height: 60px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    "
  >
    <nav class="flex items-center justify-between w-full h-full">
      <div class="font-bold text-green-600 ml-4">
        <nuxt-link to="/">Xiao BiYang</nuxt-link>
      </div>

      <!-- Desktop navigation -->
      <div class="hidden items-center h-full mr-4 sm:flex">
        <ul class="flex items-center justify-between text-center h-full">
          <li
            v-for="(item, index) in navItems"
            :key="index"
            :class="[
              'px-2 text-lg border-transparent hover:text-green-600 hover:border-green-600 border-t-2',
              { 'text-green-600 border-green-600': isActive(item.link) },
            ]"
            style="height: 60px; line-height: 60px"
          >
            <nuxt-link :to="item.link">{{ item.name }}</nuxt-link>
          </li>
        </ul>
      </div>

      <!-- Mobile navigation -->
      <div class="sm:hidden mr-4 cursor-pointer" @click="showNav">
        <a-icon type="unordered-list" style="font-size: 20px" />
      </div>
    </nav>

    <!-- Drawer for mobile -->
    <div class="sm:hidden">
      <a-drawer title="Navbar" width="50%" :visible="visible" @close="onClose">
        <ul
          class="flex items-center flex-col justify-between text-center h-full"
        >
          <li
            v-for="(item, index) in navItems"
            :key="index"
            :class="[
              'text-lg hover:text-green-600',
              { 'text-green-600': isActive(item.link) },
            ]"
            style="height: 50px; line-height: 50px"
            @click="onClose(true)"
          >
            <nuxt-link :to="item.link">{{ item.name }}</nuxt-link>
          </li>
        </ul>
      </a-drawer>
    </div>
  </header>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      visible: false,
      navItems: [
        { name: 'Home', link: '/' },
        { name: 'About', link: '/about' },
        { name: 'Search', link: '/search' },
        { name: 'List', link: '/list' },
      ],
    }
  },
  methods: {
    showNav() {
      this.visible = true
    },
    onClose(scroll = false) {
      this.visible = false
      if (scroll === true) {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
      }
    },
    isActive(link) {
      return this.$route.path === link
    },
  },
}
</script>

<style scoped>
li.active {
  color: #4caf50;
  border-color: #4caf50;
}
</style>
